<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="120px"
      >
        <el-col :span="24">
          <el-form-item label="优惠券类型111">
            <MmvSelectButton
              :list="couponTypeList"
              defaultType="primary"
              @chnage="couponSelect"
            ></MmvSelectButton>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优惠券适用车型">
            <el-radio v-model="formData.carType" label="1">全场通用</el-radio>
            <el-radio v-model="formData.carType" label="2"
              >指定品牌/车系/车型</el-radio
            >
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input
              v-model.trim="formData.couponName"
              placeholder="请输入优惠券名称"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优惠券面值" prop="couponPrice">
            <el-input
              v-model.trim="formData.couponPrice"
              placeholder="请输入优惠券面值/元"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="使用条件" prop="couponCondition">
            <el-input
              v-model.trim="formData.couponCondition"
              placeholder="请输入满多少元可以使用"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发放库存" prop="couponStock">
            <el-input
              v-model.trim="formData.couponStock"
              placeholder="请输入库存数/张"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发放时间" prop="activeStartTime">
            <el-date-picker
              v-model.trim="formData.activeStartTime"
              type="datetime"
              placeholder="请选择开始时间"
              :style="{ width: '100%' }"
              default-time="0:00:00"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发放结束时间" prop="activeEndTime">
            <el-select
              v-model="formData.activeEndTime"
              placeholder="请选择活动结束时间"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in activeEndOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="termTime">
            <span slot="label" :class="{ red: formData.termType == '2' }"
              >使用有效期</span
            >
            <el-radio
              v-model="formData.termType"
              label="1"
              :style="{ width: '50%' }"
            >
              <el-date-picker
                v-model="formData.termTime"
                type="datetimerange"
                :disabled="formData.termType == '2'"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['24:00:00']"
                :style="{ width: 'calc(100% - 90px)' }"
              >
              </el-date-picker>
            </el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="termNum">
            <el-radio
              v-model="formData.termType"
              label="2"
              :style="{ width: '50%' }"
            >
              领券后有效天数
              <el-input
                v-model.trim="formData.termNum"
                placeholder="0代表长期有效"
                :disabled="formData.termType == '1'"
                clearable
                :style="{ width: 'calc(100% - 212px)', marginLeft: '15px' }"
              >
              </el-input>
            </el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动门店/部门" prop="activityStore">
            <el-select
              v-model="formData.activityStore"
              placeholder="请选择活动门店/部门"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-option
                v-for="item in activityStoreOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发送节点" prop="sendNode">
            <el-radio v-model="formData.sendNode" label="1"
              >新用户登录自动弹出</el-radio
            >
            <el-radio v-model="formData.sendNode" label="2"
              >提单成功自动弹出</el-radio
            >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用说明" prop="describe">
            <el-input
              v-model.trim="formData.describe"
              type="textarea"
              placeholder="请输入使用说明"
              clearable
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import MmvSelectButton from './manage/components/mmv-select-button.vue'
export default {
  components: {
    MmvSelectButton,
  },
  props: [],
  data() {
    return {
      activeEndOption: [
        {
          label: '不限时间',
          value: 0,
        },
        {
          label: '其他',
          value: 1,
        },
      ],
      activityStoreOption: [
        {
          label: '默认门店',
          value: 0,
        },
        {
          label: '门店1',
          value: 1,
        },
      ],
      // 优惠券类型
      couponTypeList: [
        {
          name: '经租',
          type: 'primary',
          value: 0,
        },
        {
          name: '以租代购',
          type: '',
          value: 1,
        },
        {
          name: '短租',
          type: '',
          value: 2,
        },
        {
          name: '金融分期',
          type: '',
          value: 3,
        },
        {
          name: '直购',
          type: '',
          value: 4,
        },
      ],
      isShowAddGoods: false,
      formData: {
        couponType: 0,
        carType: 0,
        couponName: null,
        couponPrice: null,
        couponCondition: null,
        couponStock: null,
        activeStartTime: null,
        activeEndTime: 0,
        termTime: null,
        termType: '1',
        termNum: null,
        activityStore: 0,
        sendNode: '1',
        describe: null,
      },
      goodsList: [],
      rules: {
        couponName: [
          {
            required: true,
            message: '请输入优惠券名称',
            trigger: 'blur',
          },
        ],
        couponPrice: [
          {
            required: true,
            message: '请输入优惠券面值/元',
            trigger: 'blur',
          },
          {
            required: true,
            pattern: /^[+]{0,1}(\d+)$/,
            message: '只能输入正整数',
            trigger: 'blur',
          },
        ],
        couponCondition: [
          {
            required: true,
            message: '请输入使用条件',
            trigger: 'blur',
          },
          {
            required: true,
            pattern: /^[+]{0,1}(\d+)$/,
            message: '只能输入正整数',
            trigger: 'blur',
          },
        ],
        couponStock: [
          {
            required: true,
            message: '请输入发放库存',
            trigger: 'blur',
          },
          {
            required: true,
            pattern: /^[+]{0,1}(\d+)$/,
            message: '只能输入正整数',
            trigger: 'blur',
          },
        ],
        activeStartTime: [
          {
            required: true,
            message: '请输入活动开始时间',
            trigger: 'blur',
          },
        ],
        activeEndTime: [
          {
            required: true,
            message: '请输入活动结束时间',
            trigger: 'blur',
          },
        ],
        termType: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        termTime: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        termNum: [
          {
            required: false,
            message: '请输入有效期',
            trigger: 'blur',
          },
        ],
        activityStore: [
          {
            required: true,
            message: '请选择适用门店/部门',
            trigger: 'blur',
          },
        ],
        describe: [
          {
            required: true,
            message: '请输入活动说明',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {},
  created() {
    if (this.$route.params.id) {
      console.log(this.$route.params.id)
    }
  },
  mounted() {},
  methods: {
    couponSelect(val) {
      // 优惠券选择
      this.formData.couponType = val
    },
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  },
}
</script>
<style scoped>
.red::before {
  content: '*';
  color: #ff4949;
  margin-right: 4px;
}
</style>
